<template name="livechatAppearance">
	{{#requiresPermission 'view-livechat-appearance'}}

		<div class='livechat-content'>

			<h2>{{_ "Settings"}}</h2>

			<form class="rocket-form">
				<fieldset>
					<legend>{{_ "Livechat_online"}}</legend>
					<div class="input-line">
						<label for="title">{{_ "Title"}}</label>
						<input type="text" class="preview-settings rc-input__element" name="title" id="title" value="{{title}}">
					</div>
					<div class="input-line">
						<label for="color">{{_ "Title_bar_color"}}</label>
						<input type="color" class="preview-settings rc-input__element" name="color" id="color" value="{{color}}" />
					</div>
					<div class="input-line">
							<label for="showAgentInfo">{{_ "Show_agent_info"}}</label>
							<div class="inline-fields">
								<input type="radio" class="preview-settings" name="showAgentInfo" id="showAgentInfoFormTrue" checked="{{showAgentInfoFormTrueChecked}}" value="true">
								<label for="showAgentInfoFormTrue">{{_ "True"}}</label>
								<input type="radio" class="preview-settings" name="showAgentInfo" id="showAgentInfoFormFalse" checked="{{showAgentInfoFormFalseChecked}}" value="false">
								<label for="showAgentInfoFormFalse">{{_ "False"}}</label>
							</div>
						</div>
						<div class="input-line">
						<label for="showAgentEmail">{{_ "Show_agent_email"}}</label>
						<div class="inline-fields">
							<input type="radio" class="preview-settings" name="showAgentEmail" id="showAgentEmailFormTrue" checked="{{showAgentEmailFormTrueChecked}}" value="true">
							<label for="showAgentEmailFormTrue">{{_ "True"}}</label>
							<input type="radio" class="preview-settings" name="showAgentEmail" id="showAgentEmailFormFalse" checked="{{showAgentEmailFormFalseChecked}}" value="false">
							<label for="showAgentEmailFormFalse">{{_ "False"}}</label>
						</div>
					</div>
				</fieldset>
				<fieldset>
					<legend>{{_ "Livechat_offline"}}</legend>
					<div class="input-line">
						<label for="displayOfflineForm">{{_ "Display_offline_form"}}</label>
						<div class="inline-fields">
							<input type="radio" class="preview-settings" name="displayOfflineForm" id="displayOfflineFormTrue" checked="{{displayOfflineFormTrueChecked}}" value="true">
							<label for="displayOfflineFormTrue">{{_ "True"}}</label>
							<input type="radio" class="preview-settings" name="displayOfflineForm" id="displayOfflineFormFalse" checked="{{displayOfflineFormFalseChecked}}" value="false">
							<label for="displayOfflineFormFalse">{{_ "False"}}</label>
						</div>
					</div>
					<div class="input-line">
						<label for="offlineUnavailableMessage">{{_ "Offline_form_unavailable_message"}}</label>
						<textarea class="preview-settings rc-input__element" name="offlineUnavailableMessage" id="offlineUnavailableMessage">{{offlineUnavailableMessage}}</textarea>
					</div>
					<div class="input-line">
						<label for="offlineMessage">{{_ "Offline_message"}}</label>
						<textarea class="preview-settings rc-input__element" name="offlineMessage" id="offlineMessage">{{offlineMessage}}</textarea>
					</div>
					<div class="input-line">
						<label for="titleOffline">{{_ "Title_offline"}}</label>
						<input type="text" class="preview-settings rc-input__element" name="titleOffline" id="titleOffline" value="{{titleOffline}}">
					</div>
					<div class="input-line">
						<label for="colorOffline">{{_ "Title_bar_color_offline"}}</label>
						<input type="color" class="preview-settings rc-input__element" name="colorOffline" id="colorOffline" value="{{colorOffline}}" />
					</div>
					<div class="input-line">
						<label for="emailOffline">{{_ "Email_address_to_send_offline_messages"}}</label>
						<input type="text" class="preview-settings rc-input__element" name="emailOffline" id="emailOffline" value="{{emailOffline}}">
					</div>
					<div class="input-line">
						<label for="offlineSuccessMessage">{{_ "Offline_success_message"}}</label>
						<textarea class="preview-settings rc-input__element" name="offlineSuccessMessage" id="offlineSuccessMessage">{{offlineSuccessMessage}}</textarea>
					</div>
				</fieldset>
				<fieldset>
					<legend>{{_ "Livechat_registration_form"}}</legend>
					<!--
					<label class="rc-switch__label">
						<input class="rc-switch__input" type="checkbox" name="registrationFormEnabled" checked="{{registrationFormEnabled}}"/>
						<span class="rc-switch__button">
							<span class="rc-switch__button-inside"></span>
						</span>
						<span class="rc-switch__text">
							{{_ "Show_preregistration_form"}}
						</span>
					</label>
					-->
					<label class="rc-switch__label">
						<input class="rc-switch__input js-input-check" type="checkbox" name="registrationFormEnabled" {{registrationFormEnabled}}/>
						<span class="rc-switch__button">
							<span class="rc-switch__button-inside"></span>
						</span>
						<span class="rc-switch__text">{{_ "Enabled"}}</span>
					</label>
					<label class="rc-switch__label">
						<input class="rc-switch__input js-input-check" type="checkbox" name="registrationFormNameFieldEnabled" {{registrationFormNameFieldEnabled}}/>
						<span class="rc-switch__button">
							<span class="rc-switch__button-inside"></span>
						</span>
						<span class="rc-switch__text">{{_ "Show_name_field"}}</span>
					</label>
					<label class="rc-switch__label">
						<input class="rc-switch__input js-input-check" type="checkbox" name="registrationFormEmailFieldEnabled" {{registrationFormEmailFieldEnabled}}/>
						<span class="rc-switch__button">
							<span class="rc-switch__button-inside"></span>
						</span>
						<span class="rc-switch__text">{{_ "Show_email_field"}}</span>
					</label>
					<div class="input-line">
						<label for="registrationFormMessage">{{_ "Livechat_registration_form_message"}}</label>
						<textarea class="preview-settings rc-input__element" name="registrationFormMessage" id="registrationFormMessage">{{registrationFormMessage}}</textarea>
					</div>
				</fieldset>
				<fieldset>
					<legend>{{_ "Conversation_finished"}}</legend>
					<div class="input-line">
						<label for="conversationFinishedMessage">{{_ "Conversation_finished_message"}}</label>
						<textarea class="preview-settings rc-input__element" name="conversationFinishedMessage" id="conversationFinishedMessage">{{conversationFinishedMessage}}</textarea>
					</div>
					<div class="input-line">
						<label for="conversationFinishedText">{{_ "Conversation_finished_text"}}</label>
						<textarea class="preview-settings rc-input__element" name="conversationFinishedText" id="conversationFinishedText">{{conversationFinishedText}}</textarea>
					</div>
				</fieldset>
				<div class="rc-button__group submit">
					<button class="rc-button rc-button--danger reset-settings" type="button"><i class="icon-ccw"></i>{{_ "Reset"}}</button>
					<button class="rc-button rc-button--primary save"><i class="icon-floppy"></i>{{_ "Save"}}</button>
				</div>
			</form>

		</div>
	{{/requiresPermission}}
</template>
